<template>
	<account-page :title="title" :desc="desc">
		<view class="account-form-box">
			<u-form :model="model" ref="uForm" :errorType="form.errorType">
				<u-form-item class="form-item" label="手机号" prop="mobile" :label-position="form.labelPosition">
					<u-input v-model="model.mobile" placeholder="您的常用手机号" type="text" />
				</u-form-item>
			</u-form>

			<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>

			<u-gap height="40"></u-gap>

			<u-button type="error" @click="submit">确认绑定</u-button>
		</view>

		<u-gap height="40"></u-gap>
	</account-page>
</template>

<script>
	export default {
		data() {
			return {
				title: '绑定手机号',
				desc: '',
				codeTips: '',
				form: {
					errorType: ['message'],
					labelPosition: 'top'
				},
				model: {
					mobile: '',
				},
				rules: {
					mobile: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur']
						},
						{
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							},
							message: '手机号格式不正确',
							trigger: ['change', 'blur']
						}
					],
				}
			};
		},
		methods: {
			openPage(path) {
				this.$u.route({
					url: '/pages/account/' + path
				});
			},
			submit() {
				this.$u.post('/wxapi/api/update_phone', {
					token: this.vuex_token.accessToken,
					phone:this.model.mobile
				}).then(res => {
					console.log(res);
					if (res.code == 1) {
						uni.navigateBack()
					} 
					return false;
				});
			},
			codeChange(text) {
				this.codeTips = text;
			},
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	};
</script>

<style lang="scss" scoped>
	.account-form-box {
		padding: 0 32rpx;
	}
</style>
